<template>
    <div id='login-modal' class='xy'>
        <img id='logo' src='@/assets/images/logo-blue.png' />
        <div class='ctr-row'>
            <img class='icon middle' src='@/assets/images/account.png'/>
            <input v-model='formData.account' type='text' placeholder='登录账号' @keyup='keyup' />
        </div>
        <div class='ctr-row'>
            <img class='icon middle' src='@/assets/images/password.png'/>
            <div class='relative'>
                <div class='password-show middle'>
                    <template v-for='item in formData.password'>*</template>
                </div>
                <input class='password' v-model='formData.password' type='text' placeholder='密码' @keyup='keyup' />
            </div>
        </div>
        <div class='err' :class='{"err-show" : showError}'>{{error}}</div>
        <div class='m-t-10'>
            <button class='login-btn' @click='login'>登录<span v-if='isSending'>...</span></button>
        </div>
    </div>
</template>

<script>
import md5 from 'md5'
import { Request } from '@/utils'
let request = new Request()
export default {
    data () {
        return {
            isSending : false,
            error : '',
            showError : false,
            formData : {
                account : '',
                password : ''
            }
        }
    },

    methods : {
        login () {
            let formData = {...this.formData}
            if(formData.account === '') {
                this.showErr('请输入登录账号')
                return
            }

            if(formData.password === '') {
                this.showErr('请输入登录密码')
                return
            }

            formData.password = md5(formData.password)
            this.isSending = true
            request.post('admin/login', res => {
                this.isSending = false
                if(res.success) {
                    var data = res.data

                    localStorage.setItem('login-account-monitor', formData.account)
                    this.$store.commit('setAccountName', {name : data.nickName, account : formData.account})
                    
                    this.$store.commit('setLoginToken', data.access_token) //设置登录token
                    this.$store.commit('setRefreshToken', data.refresh_token) //设置刷新token
					this.$store.commit('setLoginStatus', 1) //设置登录状态
                    this.$store.commit('setLoginExpire', 3600 + 600) //设置登录状态时效

                    this.$store.commit('setAgentType', data.agentType) //代理商类型
					this.$store.commit('setUserType', data.userType) //用户类型
                    this.$router.push('/')

                }else {
                    this.showErr(res.msg)
                }
            }, formData)

        },

        showErr (msg) {
            this.error = msg
            this.showError = true
            this.$nextTick(() => {
                setTimeout(() => {
                    this.error = ''
                    this.showError = false
                }, 700)
            })
        },

        keyup (e) {
            if(e.keyCode == 13) {
                this.login()
            }
        },
    },

    mounted () {
        var account = localStorage.getItem('login-account-monitor') || this.$route.query.account
        if(account) {
            this.formData.account = account
        }
    }
}
</script>

<style scoped lang='scss'>
    #logo{
        position: absolute;
        width: 80px;
        top:0;
        left: 50%;
        transform: translate(-50%, -100%);;
        margin-top: -20px;
    }
    @keyframes faout{
        from{opacity: 1;}
        to{opacity: 0;}
    }
    #login-modal{
        position: fixed;
        width: 300px;
        height: 300px;
        background: linear-gradient(230deg,rgba(53,57,74,0) 0%,rgb(0,0,0) 100%);
        box-shadow: -10px 1px 15px 10px rgba(6,17,47,.7);
        padding:30px 30px;
    }

    .ctr-row{
        position: relative;
        padding-left: 20px;
        .icon{
            position: absolute;
            left: 0;
            width: 15px;
        }
        input{
            border:none;
            border-radius: 0;
            outline: none !important;
            background: none !important;
            color: #fefbfb;
            height: 44px;
            display: block;
            width: 100%;
            padding: 0px 15px;
            font-size: 14px;

            &.password {
                caret-color:#fefbfb;
                color: transparent;
                z-index: 2;
                position: relative;
            }

            &::placeholder{
                color: #a2a2a2;
            }
            

        }
    }

    .login-btn{
        border:2px solid #4fa1d9;
        width: 110px;
        height: 38px;
        border-radius: 20px;
        background: none;
        color: #4fa1d9;
        font-size: 12px;
        outline: none !important;

        &:hover{
            background: #4fa1d9;
            color: #fefbfb;
        }

    }

    .err{
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        color: #f33d5f;
    }
    
    .err-show{
        animation: faout 0.7s linear forwards;
    }

    .password-show{
        position: absolute;
        color: #fefbfb;
        font-size: 14px;
        width: 100%;
        left: 0;
        z-index: 1;
        padding: 0px 15px;
    }
    

</style>